<template>
  <a-layout class="merchant-layout">
    <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
      <div class="logo">
        <ShopOutlined class="logo-icon" />
        <span v-show="!collapsed">商户中心</span>
      </div>
      <a-menu v-model:selectedKeys="selectedKeys" mode="inline" theme="dark">
        <a-menu-item key="dashboard">
          <template #icon>
            <DashboardOutlined />
          </template>
          <span>数据概览</span>
        </a-menu-item>
        <a-sub-menu key="course">
          <template #icon>
            <BookOutlined />
          </template>
          <template #title>课程管理</template>
          <a-menu-item key="course-list">
            <template #icon>
              <UnorderedListOutlined />
            </template>
            课程列表
          </a-menu-item>
          <a-menu-item key="course-create">
            <template #icon>
              <PlusOutlined />
            </template>
            创建课程
          </a-menu-item>
        </a-sub-menu>
        <a-menu-item key="orders">
          <template #icon>
            <ShoppingCartOutlined />
          </template>
          <span>订单管理</span>
        </a-menu-item>
        <a-menu-item key="media">
          <template #icon>
            <CloudUploadOutlined />
          </template>
          <span>媒资管理</span>
        </a-menu-item>
        <a-menu-item key="settings">
          <template #icon>
            <SettingOutlined />
          </template>
          <span>店铺设置</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>

    <a-layout>
      <a-layout-header class="header">
        <div class="header-content">
          <div class="header-left">
            <a-button
              type="text"
              @click="toggleCollapsed"
              class="trigger-btn"
            >
              <MenuUnfoldOutlined v-if="collapsed" />
              <MenuFoldOutlined v-else />
            </a-button>
            <span class="header-title">商户中心</span>
          </div>
          <div class="user-info">
            <a-avatar :src="userInfo?.avatar" :size="32">
              <UserOutlined />
            </a-avatar>
            <span class="username">{{ userInfo?.name }}</span>
            <a-dropdown>
              <a-button type="link" class="user-dropdown">
                <DownOutlined />
              </a-button>
              <template #overlay>
                <a-menu>
                  <a-menu-item key="profile">
                    <UserOutlined />
                    个人资料
                  </a-menu-item>
                  <a-menu-item key="logout" @click="logout">
                    <LogoutOutlined />
                    退出登录
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </div>
        </div>
      </a-layout-header>

      <a-layout-content class="content">
        <router-view />
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/authStore'
import {
  ShopOutlined,
  DashboardOutlined,
  BookOutlined,
  UnorderedListOutlined,
  PlusOutlined,
  ShoppingCartOutlined,
  CloudUploadOutlined,
  SettingOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UserOutlined,
  DownOutlined,
  LogoutOutlined
} from '@ant-design/icons-vue'

const route = useRoute()
const router = useRouter()
const authStore = useAuthStore()

const collapsed = ref(false)
const selectedKeys = ref(['dashboard'])

const userInfo = computed(() => authStore.userInfo)

// 根据路由更新选中的菜单项
watch(
  () => route.path,
  (newPath) => {
    if (newPath.includes('/merchant/course')) {
      selectedKeys.value = ['course']
    } else if (newPath.includes('/merchant/orders')) {
      selectedKeys.value = ['orders']
    } else if (newPath.includes('/merchant/media')) {
      selectedKeys.value = ['media']
    } else if (newPath.includes('/merchant/settings')) {
      selectedKeys.value = ['settings']
    } else {
      selectedKeys.value = ['dashboard']
    }
  },
  { immediate: true }
)

const toggleCollapsed = () => {
  collapsed.value = !collapsed.value
}

const logout = () => {
  authStore.logout()
}
</script>

<style scoped>
.merchant-layout {
  min-height: 100vh;
}

.logo {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
  font-weight: bold;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo-icon {
  font-size: 24px;
}

.header {
  background: white;
  padding: 0 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  z-index: 1000;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.trigger-btn {
  font-size: 16px;
  color: #666;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.username {
  color: #333;
  font-weight: 500;
}

.user-dropdown {
  color: #666;
  padding: 4px 8px;
}

.content {
  margin: 24px;
  padding: 24px;
  background: #f5f5f5;
  border-radius: 8px;
  min-height: calc(100vh - 112px);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .content {
    margin: 16px;
    padding: 16px;
  }
  
  .header {
    padding: 0 16px;
  }
  
  .header-title {
    display: none;
  }
}

/* 深色主题侧边栏优化 */
:deep(.ant-layout-sider-dark) {
  background: #001529;
}

:deep(.ant-menu-dark) {
  background: #001529;
}

:deep(.ant-menu-dark .ant-menu-item-selected) {
  background: #1890ff;
}

:deep(.ant-menu-dark .ant-menu-submenu-title:hover) {
  background: #1890ff;
}
</style>
